<template>
	<view class="big-box flex-col align-center">
		<view class="nav-fix" :style="{zIndex:zIndex?'4':'1'}">
			<x-img class="nav-bg" :src="`${baseImg}/static/images/homes/nav-bg.png`" static height="313rpx"></x-img>
			<x-img class="nav-tit" :style="{top:calculateStatusBar}" :src="`${baseImg}/static/images/homes/nav-title.png`" static
				width="468rpx" height="70rpx"></x-img>
			<view class="nav-box justify-between align-center" :style="{top:calculateHeight}">
				<view class="justify-start align-center">
					<image class="location-icon" :src="`${baseImg}/static/images/homes/location-icon.png`" mode=""></image>
					<text class="location-text">{{location}}</text>

				</view>
				<view class="search-box align-center">
					<u-search :clearabled="true" v-model='searchKey' placeholder='请输入' :showAction='false'
						bgColor='#FFFFFF00'></u-search>
				</view>
				<view class="message-icon-box">
					<image :src="`${baseImg}/static/images/homes/message-icon.png`" class="message-icon" mode=""></image>
					<view class="dot" v-if="isMsg">

					</view>
				</view>
			</view>
		</view>

		<view class="banner" :style="{marginTop:bannerHeight,opacity:zIndex?'0':'1'}">
			<u-swiper circular height='303rpx' :list="banner" @change="e => current = e.current">
				<view slot="indicator" class="indicator justify-center">
					<view class="indicator__dot" v-for="(item, index) in banner" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
		</view>
		<view class="grid ">
			<view class="grid-item flex-col align-center" v-for="i,index in home_text" :key="i.value"
				@tap="navtoTap(i,index)">
				<x-img :style="{filter:`grayscale(${getOpenStatus(i)})`}"  :src="`${baseImg}/static/images/homes/Slice ${index+6}.png`"
					width="88rpx" height="88rpx"></x-img>
				<text class="gird-item-t"> {{i.value}} </text>
			</view>
		</view>
		<view class="" style="width: 100vw;height: 16rpx;background: #F1F1F1;margin-bottom: 30rpx;">

		</view>
		<view class="banner-2">
			<u-swiper keyName='cover' circular height='279rpx' :list="vip_list" @change="e => current2 = e.current"
				@click='bannerTap'>
				<view slot="indicator" class="indicator justify-center">
					<view class="indicator__dot" v-for="(item, index) in vip_list" :key="index"
						:class="[index === current2 && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
		</view>

		<view class="tab" :style="{top:bannerHeight}">
			<u-tabs :list="list2" @click="tapTab" lineColor='#CC1D1D' lineWidth='156rpx' :scrollable='false'
				:activeStyle="{
				'font-size': '30rpx',
				'color': '#000000'
			}" :inactiveStyle="{
				'font-size': '30rpx',
				'color': '#000000'
			}"></u-tabs>
		</view>
		<view class="tab-type">
			<view class="tab-type-item justify-between" v-for="(item,index) in tabList" :key="index"
				v-if="tabCurrent==0">
				<x-img class="goods-img" :src="item.cover" radius='8rpx' width="253rpx" height="176rpx"></x-img>
				<view class="goods-info flex-col ">
					<view class="goods-name">
						{{item.type}}
					</view>
					<view class="goods-desc">
						可以搭载{{item.carry_num}}人
					</view>
					<view class="goods-price">
						起步价：<text style="color: #CC1D1D;">{{item.star_price}}元</text> (按里程计费)
					</view>
				</view>
			</view>
			<view class="tab-type-item justify-between " v-for="(item,index) in tabList" :key="index"
				v-if="tabCurrent==1">
				<x-img class="goods-img" :src="item.cover" radius='8rpx' width="253rpx" height="176rpx"></x-img>
				<view class="goods-info flex-col ">
					<view class="goods-name">
						{{item.title}}
					</view>
					<view class="goods-desc">
						有效期{{item.validity_val}}{{item.validity_unit}}
					</view>
					<view class="goods-price">
						<text style="color: #CC1D1D;">{{item.price}}元</text>
					</view>
				</view>
			</view>
			<view class="tab-type-item justify-between" v-for="(item,index) in tabList" :key="index"
				v-if="tabCurrent==2">
				<x-img class="goods-img" :src="item.cover" radius='8rpx' width="253rpx" height="176rpx"></x-img>
				<view class="goods-info flex-col ">
					<view class="goods-name justify-between">
						{{item.title}}
						<view class="">
							￥{{item.price}}
						</view>
					</view>
					<view class="goods-desc">
						{{item.contain}}
					</view>
					<view class="goods-price" v-if="item.equity==1">
						{{item.equity==1?'可用权益卡':''}}
					</view>
				</view>
			</view>
			<view class="justify-between flex-wrap">

				<view class="tab-type-item " :style="{border:'none'}" v-for="(item,index) in tabList" :key="index"
					v-if="tabCurrent==3">
					<x-img class="goods-img" :src="item.cover" radius='8rpx' width="253rpx" height="176rpx"></x-img>
					<view class="flex-col justify-between">
						<view class="goods-name">
							{{item.title}}
						</view>
						<view class="goods-desc">
							已售{{item.sales}}
						</view>
						<view class="goods-price">
							<text class="price" style="color: #CC1D1D;">{{item.price}}</text>
							<text class="or_price">{{item.or_price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import { config } from '@/config/config.js'
	export default {
		props: {
			scrollTop: {
				default: 0,
			}
		},
		data() {
			return {
				baseImg:config.baseImg,
				isMsg: false,
				location: '沈阳',
				searchKey: '',
				oldscrollTop: 0,
				pageListData: {},
				tabCurrent: 0,
				current: 0,
				current2: 0,
				tabList: [],
				pageInfo: {
					current_page: 1,
					per_page: 10,
					total: 1,
				},

				banner: [

				],
				vip_list: [],
				home_text: [],
				info_list: [],
				list2: [{
					name: '礼宾车',
					ind: 0,
				}, {
					name: '权益卡',
					ind: 1,
				}, {
					name: '餐饮服务',
					ind: 2,
				}, {
					name: '辽品甄选',
					ind: 3,
				}, ]
			}
		},
		computed: {
			calculateHeight() {
				return `calc(${this.statusHeight}px + ${88}rpx)`;
			},
			bannerHeight() {
				return `calc(${this.statusHeight}px + ${88+112}rpx)`;
			},
			calculateStatusBar() {
				return `${this.statusHeight}px`;
			},
			zIndex() {
				if (this.oldscrollTop < this.scrollTop) {
					this.oldscrollTop = this.scrollTop
					return this.scrollTop > 10
				} else {
					this.oldscrollTop = this.scrollTop
					return false
				}
			}
		},
		created() {
			this.get_home_msg()
		},
		methods: {
			...mapActions(['getNoticeCnt', 'getList', 'getPageList', 'getHomeMsg']),
			bannerTap(e) {
				let id = this.vip_list[e].id
				console.log(id);
			},
			getOpenStatus(item){
				if(item.switch==1){
					
					// 固定比较的时间为 "08:00:00"
					const fixedTime = item.start_times;
					const [fixedHours, fixedMinutes, fixedSeconds] = fixedTime.split(':').map(Number);
					// 固定比较的时间为 "08:00:00"
					const endfixedTime = item.end_times;
					const [endfixedHours, endfixedMinutes, endfixedSeconds] = endfixedTime.split(':').map(Number);
					// 当前比较的时间为 
					const nowFixedTime = this.$moment().format("HH:mm:ss")
					const [nowfixedHours, nowfixedMinutes, nowfixedSeconds] = nowFixedTime.split(':').map(Number);
					// 比较
					if (nowfixedHours > fixedHours || (nowfixedHours === fixedHours && (nowfixedMinutes > fixedMinutes || (nowfixedMinutes === fixedMinutes && nowfixedSeconds > fixedSeconds)))) {
					    console.log("当前时间大于 '08:00:00'");
					} else if (nowfixedHours === fixedHours && nowfixedMinutes === fixedMinutes && nowfixedSeconds === fixedSeconds) {
					    console.log("当前时间等于 '08：0：0'");
					} else {
					    console.log("当前时间小于 '08：0：0'");
					}
					// 比较
					if (nowfixedHours > endfixedHours || (nowfixedHours === endfixedHours && (nowfixedMinutes > endfixedMinutes || (nowfixedMinutes === endfixedMinutes && nowfixedSeconds > endfixedSeconds)))) {
					    console.log("当前时间大于 ",endfixedTime);
					} else if (nowfixedHours === endfixedHours && nowfixedMinutes === endfixedMinutes && nowfixedSeconds === endfixedSeconds) {
					    console.log("当前时间等于 ",endfixedTime);
					} else {
					    console.log("当前时间小于 ",endfixedTime);
					}
					
					
					// console.log(data,'data');
					// end_times
					// if(){
						// "08:00:00"
					// }
					// start_times
					return 1
				}else{
					return 0
				}
			},
			navtoTap(e, index) {
				switch (index) {
					case 0:
						this.$navto('/car/index/index')
						break;
					case 2:
						this.$navto('/guest/index/index')
						break;
					case 3:
						this.$navto('/airvip/index/index')
						break;
						case 4:
							this.$navto('/trainvip/index/index')
							break;
					default:
						break;
				}
			},
			async get_home_msg() {
				let data = await this.getHomeMsg()
				this.banner = data.banner
				this.vip_list = data.vip_list
				this.home_text = data.home_text
				// 是否有消息
				this.isMsg = await this.getNoticeCnt()
				// 地点
				this.info_list = await this.getList()
				this.location = this.info_list[0].name
				this.tapTab()
				console.log(this.isMsg, 'isMsg');
			},
			async tapTab(e = {
				ind: 0
			}) {
				// tabs切换
				this.tabCurrent = e.ind
				let res = await this.getPageList({
					...this.pageInfo,
					index: e.ind
				})
				this.tabList = res.data
				this.pageInfo = {
					current_page: res.current_page,
					per_page: res.per_page,
					total: res.total,
				}

			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		.grid {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			width: 670rpx;
			margin-top: 42rpx;

			.grid-item {
				margin-bottom: 36rpx;
			}

			.gird-item-t {
				display: block;
				margin-top: 18rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 22rpx;
				color: rgba(0, 0, 0, 0.87);
			}
		}

		.tab-type {
			margin-top: 20rpx;
			width: 670rpx;

			.tab-type-item {
				padding: 20rpx 0;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);
			}

			.goods-img {
				margin-right: 20rpx;
			}

			.goods-info {
				// padding: ;
				flex: 1;
			}

			.goods-name {
				margin-top: 15rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
			}

			.goods-desc {
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #7E7E7E;
				margin: 15rpx 0 52rpx;
			}

			.goods-price {
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 33rpx;
				margin-bottom: 10rpx;

				.price {
					font-size: 28rpx;
				}

				.or_price {
					font-size: 28rpx;
					text-decoration: line-through;
				}
			}
		}

		.tab {
			width: 670rpx;
			width: 100%;
			padding: 0 40rpx;
			z-index: 10;
			background: #ffffff;
			position: sticky;

			.tab-item {
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;
			}
		}

		.banner-2 {
			width: 670rpx;
			height: 279rpx;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			overflow: hidden;
		}

		.banner {
			position: relative;
			z-index: 3;
			width: 670rpx;
			height: 303rpx;
			margin-top: 40rpx;
			border-radius: 30rpx;
			overflow: hidden;
			transition: all 1s;
		}

		.indicator {
			justify-content: center;

			&__dot {
				height: 6px;
				width: 6px;
				border-radius: 100px;
				background-color: rgba(255, 255, 255, 0.35);
				margin: 0 5px;
				transition: background-color 0.3s;

				&--active {
					width: 18px;
					background-color: #ffffff;
				}
			}
		}

		.nav-fix {
			position: fixed;
			top: 0;
			left: 0;
			background: #ffffff;
			transition: all 1s;
		}

		.nav-bg {
			position: fixed;
			top: 0;
			left: 0;
			background: #ffffff;
		}

		.nav-tit {
			position: fixed;
			z-index: 1;
			left: 53rpx;
		}

		.nav-box {
			position: fixed;
			width: 100vw;
			z-index: 1;
			padding: 0 51rpx 0 55rpx;
		}

		.location-text {
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
		}

		.location-icon {
			width: 30rpx;
			height: 38rpx;
			margin-right: 4rpx;
		}

		.dot {
			width: 13rpx;
			height: 13rpx;
			background: #DB4949;
			border-radius: 50%;
			position: absolute;
			top: -4rpx;
			right: 0;
		}

		.search-box {
			width: 476rpx;
			height: 72rpx;
			background: rgba(255, 255, 255, 0.6);
			border-radius: 30rpx 30rpx 30rpx 30rpx;
		}

		.message-icon-box {
			position: relative;
		}

		.message-icon {
			width: 36rpx;
			height: 39rpx;
		}
	}
</style>